<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>字体-大小</title>
        <style>
            p.px{
                font-size: 16px;
            }
            p.em{
                font-size: 1em;
            }
            p.per{
                font-size: 100%;
            }
            p.med{
                font-size: medium;
            }
            p.small{
                font-size: small;
            }
            p.smaller{
                font-size: smaller;
            }
            p.large{
                font-size: large;
            }
            p.larger{
                font-size: larger;
            }
        </style>
    </head>
    <body>
         <p class="px">
             i am 16px
         </p>
         <p class="em">
             i am 1em
         </p>
         <p class="per">
             i am 100%
         </p>
         <p class="med">
             i am medium
         </p>
         <p class="small">
             i am small
         </p>
         <p class="smaller">
             i am smaller
         </p>
         <p class="large">
             i am large
         </p>
         <p class="larger">
             i am larger
         </p>
    </body>
</html>